বুটস্ট্রাপ ৫ এ মডাল (Modal) একটি পপ-আপ উইন্ডো হিসেবে ব্যবহৃত হয়, যা ব্যবহারকারীর সঙ্গে ইন্টারঅ্যাকশন করার জন্য গুরুত্বপূর্ণ কন্টেন্ট দেখানোর জন্য উপযোগী। মডাল বিভিন্ন ইভেন্টের মাধ্যমে কন্ট্রোল করা যায় এবং এতে অ্যানিমেশন ব্যবহার করে আরও সুন্দর এবং ইন্টারঅ্যাকটিভ এফেক্ট তৈরি করা যায়।
এখানে আমরা মডাল ইভেন্ট এবং অ্যানিমেশন নিয়ে বিস্তারিত আলোচনা করব।
বুটস্ট্রাপ ৫ মডালের জন্য কিছু গুরুত্বপূর্ণ ইভেন্ট প্রদান করে, যা বিভিন্ন সময় মডাল ওপেন, ক্লোজ, অথবা হিডেন হওয়ার সময় ট্রিগার হয়। এই ইভেন্টগুলো ব্যবহার করে আপনি মডালের আচরণ কাস্টমাইজ করতে পারেন।
show.bs.modal
মডাল খোলার আগে এটি ট্রিগার হয়। এই ইভেন্টটি মডাল খোলার জন্য প্রস্তুতি নেওয়ার সময় ব্যবহৃত হয়।
$('#myModal').on('show.bs.modal', function (event) {
console.log('মডাল খোলার প্রক্রিয়া শুরু');
});
shown.bs.modal
মডাল সম্পূর্ণরূপে খুলে গেলে এটি ট্রিগার হয়। এটি ব্যবহৃত হয় যখন মডাল পুরোপুরি প্রদর্শিত হয়ে যায়।
$('#myModal').on('shown.bs.modal', function (event) {
console.log('মডাল সম্পূর্ণরূপে প্রদর্শিত হয়েছে');
});
hide.bs.modal
মডাল বন্ধ হওয়ার আগে এই ইভেন্টটি ট্রিগার হয়। এটি ব্যবহৃত হয় যখন মডালটি বন্ধ হতে যাচ্ছে।
$('#myModal').on('hide.bs.modal', function (event) {
console.log('মডাল বন্ধ হওয়ার প্রক্রিয়া শুরু');
});
hidden.bs.modal
মডাল সম্পূর্ণরূপে বন্ধ হয়ে গেলে এটি ট্রিগার হয়। এটি ব্যবহারকারীর ইন্টারঅ্যাকশন পর মডাল সম্পূর্ণভাবে বন্ধ হয়ে যাওয়ার সময় ব্যবহৃত হয়।
$('#myModal').on('hidden.bs.modal', function (event) {
console.log('মডাল সম্পূর্ণরূপে বন্ধ হয়েছে');
});
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">মডাল শিরোনাম</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
এইখানে মডালের কন্টেন্ট থাকবে।
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">বন্ধ করুন</button>
<button type="button" class="btn btn-primary">সংরক্ষণ করুন</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
মডাল খুলুন
</button>
<script>
// Modal Events
$('#myModal').on('show.bs.modal', function (event) {
console.log('মডাল খোলার প্রক্রিয়া শুরু');
});
$('#myModal').on('shown.bs.modal', function (event) {
console.log('মডাল সম্পূর্ণরূপে প্রদর্শিত হয়েছে');
});
$('#myModal').on('hide.bs.modal', function (event) {
console.log('মডাল বন্ধ হওয়ার প্রক্রিয়া শুরু');
});
$('#myModal').on('hidden.bs.modal', function (event) {
console.log('মডাল সম্পূর্ণরূপে বন্ধ হয়েছে');
});
</script>
বুটস্ট্রাপ ৫ মডালগুলির জন্য কিছু অ্যানিমেশন রয়েছে যা আপনি কাস্টমাইজ করতে পারেন। মডালটি ওপেন বা ক্লোজ হওয়ার সময় সাধারণত একটি স্লাইডিং বা ফেড ইন/আউট অ্যানিমেশন ব্যবহার করা হয়। বুটস্ট্রাপ ৫ এ মডালটির জন্য এই অ্যানিমেশন fade ক্লাস ব্যবহার করে সক্রিয় করা হয়।
<!-- Modal with fade animation -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">অ্যানিমেটেড মডাল</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
এই মডালটি ফেড অ্যানিমেশন সহ প্রদর্শিত হচ্ছে।
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">বন্ধ করুন</button>
<button type="button" class="btn btn-primary">সংরক্ষণ করুন</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
অ্যানিমেটেড মডাল খুলুন
</button>
এখানে fade ক্লাসটি মডালকে ফেড ইন/আউট অ্যানিমেশন দেয়। যখন মডালটি খুলবে, এটি ধীরে ধীরে প্রদর্শিত হবে এবং বন্ধ হলে ধীরে ধীরে অদৃশ্য হয়ে যাবে।
যদি আপনি মডালের অ্যানিমেশন টেমপ্লেট কাস্টমাইজ করতে চান, তাহলে আপনি CSS দিয়ে ফেড ইন বা স্লাইড ইফেক্ট বাড়াতে পারেন।
.modal.fade .modal-dialog {
transform: translate(0, -50px);
transition: transform 0.3s ease-out;
}
.modal.show .modal-dialog {
transform: translate(0, 0);
}
এটি মডালটির ওপেন হওয়ার সময় একটি স্লাইড ইফেক্ট যোগ করবে, যা মডালটি স্ক্রীনের উপরের অংশ থেকে আসবে।
বুটস্ট্রাপ ৫-এ মডাল ইভেন্টস এবং অ্যানিমেশন ব্যবহারের মাধ্যমে আপনি মডালের আচরণ কাস্টমাইজ করতে পারেন। show.bs.modal, shown.bs.modal, hide.bs.modal, এবং hidden.bs.modal ইভেন্টগুলো ব্যবহার করে আপনি মডালের ওপেনিং এবং ক্লোজিং প্রক্রিয়া কন্ট্রোল করতে পারেন। মডালটির অ্যানিমেশন fade ক্লাস ব্যবহার করে সহজেই সক্রিয় করা যায়, এবং CSS কাস্টমাইজেশন দ্বারা অ্যানিমেশন আরও ইন্টারঅ্যাকটিভ করা সম্ভব।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
